<!DOCTYPE html>
<html>
<head>
    <script src="/assets/jquery/jquery-3.1.1.min.js"></script>
    <script src="/assets/layui-2.9.18/layui.js"></script>
    <link rel="stylesheet" href="/assets/layui-2.9.18/css/layui.css">
    <link rel="stylesheet" href="/assets/layui-2.9.18/css/admin.css">
    <script src="/assets/september/common.js"></script>
    <script src="/assets/september/htmlBuilder.js"></script>
    <script src="/assets/september/search.js"></script>
    <link rel="stylesheet" href="/assets/pages/list.css">
    <link rel="stylesheet" href="/assets/pages/form.css?1">
</head>
<body>

<div class="layui-form" style="padding: 20px 20px 0 20px;">
    <form id="form" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">方案名称</label>
            <div class="layui-input-inline">
                <input type="text" name="planName" class="layui-input" lay-verify="required"/>
            </div>
        </div>
        <hr>
        <div class="layui-form-item listFlashTemplate" style="display: none">
            <label class="layui-form-label">选择节目</label>
            <div class="layui-input-inline">
                <select class="flashItem">
                    <option value=""></option>
                    <#list flashes as flash>
                        <option value="${flash.id}">${flash.flashName}</option>
                    </#list>
                </select>
            </div>
            <#--            删除,这一行-->
            <button type="button" class="layui-btn layui-btn-danger" onclick="deleteItem(this)"><i
                        class="layui-icon"></i></button>
        </div>
        <#--        增加一行-->


    </form>
    <div class="layui-form-label">
        <button type="button" onclick="createItem()" class="layui-btn layui-btn-normal wid-200px">
           插入节目 <i class="layui-icon"></i>
        </button>
    </div>

    <div class="layui-form-label">

        <input class="layui-btn layui-btn-normal wid-200px" lay-submit lay-filter="submit_button"
               value="提交">
    </div>

</div>


<script>
    let temp = $('.listFlashTemplate');
    temp.removeClass("listFlashTemplate");
    let dhtml = temp[0].outerHTML;

    let subCategory = temp.parent();
    let index = 0
    let form
    layui.config({
        base: '../../../assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table'], function () {
        form = layui.form;

        createItem()

        form.on("submit", function (data) {
            // console.log(data)
            let ids = []
            $('.flashItem').each(function (index, element) {
                let flashId = $(element).val()
                if (flashId) {
                    ids.push(flashId)
                }
            });
            if (ids.length === 0) {
                layer.msg("请至少选择一个节目!")
                return
            }
            data.field.flashIds = ids.join(",")
            layer.confirm("确定保存吗？", function () {
                sajax({
                    url: "/led/doAddPlan",
                    type: "post",
                    data: data.field,
                    dataType: 'json',
                    success: function (res) {
                        layer.msg('保存成功', {shade: [0.1, '#fff'], time: 1600});
                        closeWindowAndRefreshParent();
                    }
                })
            });
        });

    });

    function deleteItem(e) {
        $(e).parent().remove()
        console.log(e)
        // $('#flashItem' + index).remove()
    }

    function createItem() {
        let copy = $(dhtml);
        index++
        copy.css("display", "block")
        copy.children("div").children("select").attr("id", "flashItem" + index)
        subCategory.append(copy);
        console.log(copy)
        form.render('select');
    }


</script>

</body>
</html>
